<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <title>载人航天飞船</title>
  </head>

  <body>
    <div class="main">
      <h3 class="box">神舟十三号载人飞船发射</h3>
      <div class="notice-item box">
        <a>见证历史时刻！正在直播神舟十三号发射升空！</a><span>&times;</span>
      </div>
      <ul class="comment-header box">
        <li>按热度排序</li>
        <li>按时间排序</li>
      </ul>
      <div class="comment-send box">
        <div class="user-face">
          <img id="avatar" src="images/0.jpg" alt="" />
        </div>
        <div class="textarea-comtainer">
          <input type="text" placeholder="请输入昵称" id="name" />
          <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
          <button class="comment-submit" id="btn" onclick="publish()">发表<br />评论</button>
        </div>
      </div>
      <div class="reply-wrap box">
        <div class="user-face"></div>
        <div class="right">
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <img src="images/user-1.jpg" alt="" />
              </div>
              <div class="user-name">先生夏</div>
              <p>载人航天工程是一个国家综合国力的体现，厉害了，我的国！</p>
            </div>
            <div class="info">
              <span>2021-10-16 11:58</span>
              <span>28460</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <img src="images/user-2.jpg" alt="" />
              </div>
              <div class="user-name">梓川枫的熊猫</div>
              <p>看完整个神舟十三号发射的直播节目，太激动人心了！</p>
            </div>
            <div class="info">
              <span>2021-10-16 11:58</span>
              <span>324</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <img src="images/user-3.jpg" alt="" />
              </div>
              <div class="user-name">猫一撮先生</div>
              <p>致敬航天人，前进的步伐从未停止 祝三位航天员一切顺利！</p>
            </div>
            <div class="info">
              <span>2021-10-16 12:09</span>
              <span>493</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
        </div>
      </div>
      <div id="new"></div>
    </div>
    <script>

      var objs;
  
      function publish(){
        // 头像处理
        // 使用随机0-15 之间的数字
        var num = Math.floor(Math.random() * 16);  // 0-15
        var imgSrc = "images/" + num + ".jpg";
        // 评论的昵称
        var name = document.getElementById("name").value;
        // 评论的详情
        var content = document.getElementById("txt").value;
        // 时间
        var date = new Date().toLocaleString(); // 日期格式化
        // dom操作
        // es6新特性 字符串声明
        // var str = "123";
        // var str2 = `a${str}bc`; // 
        // console.log(str + '---' + str2);
  
        var str = `<div class="user">
                    <div class="user-face">
                      <img src="${imgSrc}" alt="" />
                    </div>
                    <div class="user-name">${name}</div>
                    <p>${content}</p>
                  </div>
                  <div class="info">
                    <span>${date}</span>
                    <span>28460</span>
                    <span></span>
                    <span><a class="remove" href="#">删除</a></span>
                  </div>`;
  
        // 创建div元素节点
        var el_div = document.createElement("div");
  
        el_div.setAttribute("class","reply-item");
  
        // 将上面创建的字符串追加到div中
        el_div.innerHTML = str;
        //将div追加到right中
        document.getElementsByClassName("right")[0].appendChild(el_div);
  
        remove(); // 更新objs数组的对象
      }
  
      function remove(){
        objs = document.getElementsByClassName("remove");
        for (let index = 0; index < objs.length; index++) {
          objs[index].onclick = function(){
            //<div class="right">
            this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
          }
          
        }
      }
      // 给页面目前已经存在的评论绑定点击事件
      remove();
    </script>
  </body>
</html>

